<template>
  <div class="chart-tool">
    <el-tooltip content="分析模式" placement="top" effect="light">
      <el-dropdown trigger="click">
        <x-icon icon="analysemode" size="20" source="cus" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in modeTypes" :key="item.value" @click="switchMode(item)">
              {{ item.title }}
            </el-dropdown-item>
            <el-dropdown-item @click="switchChartMode">
              {{ scmTitle }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-tooltip>
    <temp v-if="temp" />
    <el-tooltip content="设置" placement="top" effect="light">
      <x-icon
        icon="setting"
        source="el"
        size="20"
        style="cursor: pointer;"
        class="mx-4"
        @click="togglePanels"
      />
    </el-tooltip>
    <Panels v-model="settingPaneVisible" class="panels-box" />
  </div>
</template>

<script setup name="header">
  import Panels from '@/views/analyse/panels'
  import { useRoute } from 'vue-router'
  import useChartsStore from '@/store/modules/charts'
  import router from '@/router'

  const temp = ref(null)
  const settingPaneVisible = ref(false)
  const route = useRoute()
  const modeTypes = [
    { title: '零扫宽', value: 'ZeroSpan' },
    { title: '数字调制分析', value: 'DigitalModulation' },
    { title: '谐波', value: 'Harmonic' }
  ]
  const togglePanels = () => {
    settingPaneVisible.value = !settingPaneVisible.value
  }
  const switchMode = item => {
    router.push({
      name: item.value
    })
  }
  const scmTitle =computed(() => {
    if (useChartsStore().static.enabled) {
      return '动态图表'
    } else {
      return '静态图表'
    }
  })
  const switchChartMode = () => {
    useChartsStore().static.enabled = !useChartsStore().static.enabled
    useChartsStore().start = 0
  }
  const comps = {
    zerospan: defineAsyncComponent(() => import('./ZeroSpanHeader.vue')),
    digitalmodulation: defineAsyncComponent(() => import('./DmHeader.vue'))
  }

  watchEffect(() => {
    if (route?.path.includes('zeroSpan')) {
      temp.value = comps['zerospan']
    } else if (route?.path.includes('digitalModulation')) {
      temp.value = comps['digitalmodulation']
    } else {
      temp.value = null
    }
  })

</script>

<style scoped>
.chart-tool {
  display: flex;
  align-items: center;
}
</style>
